<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>图标菜单按钮组件</title>
    <link rel="stylesheet" href="css/bootstrap.min.css"/>
    <script src="js/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <style>
        .a{
            height:50px;
            border:1px solid #ccc;
            background:#eee;
        }

    </style>
</head>
<body style="margin: 50px;">
<!--
小图标，建议只使用i 和span
<i class="glyphicon glyphicon-star"></i>
<span class="glyphicon glyphicon-star"></span>
-->
<!--
也可以做按钮
<button class="btn btn-default btn-lg">
    <i class="glyphicon glyphicon-star"></i>
</button>
-->


<!--//下拉菜单
<div class="dropdown ">
    <button class="btn btn-default" data-toggle="dropdown">&lt;!&ndash;调用js&ndash;&gt;
下拉菜单
<span class="caret"></span>&lt;!&ndash;三角箭头，根据父div的方向定方向
</button>
<ul class="dropdown-menu">&lt;!&ndash;告诉ul这是下拉菜单&ndash;&gt;
    <li><a href="">首页</a></li>
    <li><a href="">咨询</a></li>
    <li><a href="">产品</a></li>
    <li><a href="">关于</a></li>
</ul>
</div>
-->
<!--
<div class="dropup ">
    <button class="btn btn-default" data-toggle="dropdown">
        下拉菜单
        <span class="caret"></span>
    </button>
    <ul class="dropdown-menu dropdown-menu-right">
        <li><a href="">首页</a></li>
        <li><a href="">咨询</a></li>
        <li><a href="">产品</a></li>
        <li><a href="">关于</a></li>
    </ul>
</div>
-->
<!--
向上拉
<div class="dropup ">
    <button class="btn btn-default" data-toggle="dropdown">&lt;!&ndash;调用js&ndash;&gt;
        下拉菜单
        <span class="caret"></span>&lt;!&ndash;三角箭头，根据父div的方向定方向&ndash;&gt;
    </button>
    <ul class="dropdown-menu">&lt;!&ndash;告诉ul这是下拉菜单&ndash;&gt;
        <li><a href="">首页</a></li>
        <li><a href="">咨询</a></li>
        <li><a href="">产品</a></li>
        <li><a href="">关于</a></li>
    </ul>
</div>
-->
<!--出现的菜单居右
<div class="dropup ">
    <button class="btn btn-default" data-toggle="dropdown">&lt;!&ndash;调用js&ndash;&gt;
        下拉菜单
        <span class="caret"></span>&lt;!&ndash;三角箭头，根据父div的方向定方向&ndash;&gt;
    </button>
    <ul class="dropdown-menu dropdown-menu-right">&lt;!&ndash;出现的菜单居右&ndash;&gt;

        <li><a href="">首页</a></li>
        <li><a href="">咨询</a></li>
        <li><a href="">产品</a></li>
        <li><a href="">关于</a></li>
    </ul>
</div>-->
<!--
<div class="dropdown">
    <button class="btn btn-default" data-toggle="dropdown">
        下拉菜单
        <span class="caret"></span>
    </button>
    <ul class="dropdown-menu">
        <li class="dropdown-header">网站导航</li>
        <li><a href="">首页</a></li>
        <li><a href="">咨询</a></li>
        <li class="divider">分割线<a href="">产品</a></li>
        <li class="disabled"><a href="">关于</a></li>&lt;!&ndash;光标移入变禁止图标&ndash;&gt;
    </ul>
</div>
-->
<!--<div class="btn-group">&lt;!&ndash;按钮组&ndash;&gt;
    <button class="btn btn-default">左</button>
    <button class="btn btn-default">中</button>
    <button class="btn btn-default">右</button>
</div>-->
<!--

<div class="btn-toolbar">
    <div class="btn-group btn-group-lg">
        <button class="btn btn-default">左</button>
        <button class="btn btn-default">中</button>
        <button class="btn btn-default">右</button>
    </div>
    <div class="btn-group">
        <button class="btn btn-default">1</button>
        <button class="btn btn-default">2</button>
        <button class="btn btn-default">3</button>
    </div>
</div>
-->
<!--

<div class="btn-group">
    <button class="btn btn-default">左</button>
    <button class="btn btn-default">中</button>
    <button class="btn btn-default">右</button>
    <div class="btn-group ">
        <button class="btn btn-default dropdown-toggle" data-toggle="dropdown">
            下拉菜单
            <span class="caret"></span>
        </button>
        <ul class="dropdown-menu">
            <li><a href="">首页</a></li>
            <li><a href="">咨询</a></li>
            <li><a href="">产品</a></li>
            <li><a href="">关于</a></li>
        </ul>
    </div>
</div>
-->

<!--

<div class="btn-group-vertical">垂直排列;
    <button class="btn btn-default">左</button>
    <button class="btn btn-default">中</button>
    <button class="btn btn-default">右</button>
</div>
-->
<!--

<div class="btn-group-justified">&lt;!&ndash;两端对齐&ndash;&gt;
    <a class="btn btn-default">左</a>    //只能用<a>
    <a class="btn btn-default">中</a>
    <a class="btn btn-default">右</a>
</div>
-->


<!--

<div class="btn-group-justified">
    <button class="btn btn-default">左</button>
    <button class="btn btn-default">中</button>
    <button class="btn btn-default">右</button>
</div>
-->

    <div class="btn-group ">
        <button class="btn btn-default">下拉菜单</button>
        <button class="btn btn-default dropdown-toggle" data-toggle="dropdown">

            <span class="caret"></span>
        </button>
        <ul class="dropdown-menu">
            <li><a href="">首页</a></li>
            <li><a href="">咨询</a></li>
            <li><a href="">产品</a></li>
            <li><a href="">关于</a></li>
        </ul>
    </div>


</body>
</html>